<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css reset 开始 */
        html,body {
            height: 100%;
            overflow: hidden;
        }
        html,body,h1,h2,h3,h4,h5,h6,p,ul,li{
            margin: 0px;
            padding: 0px;
            font: 14px "微软雅黑";
        }
        a{
            text-decoration: none;
            display: block;
        }
        li{
            list-style: none;
        }
        img {
            display: block;
        }
        /* common css 开始 */
        /* 清空浮动 */
        .clearfix{
            *zoom:1;
        }
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        /* 头部样式 */
        #head .headMain{
            position: relative;
            width: 1100px;
            height: 80px;
            background-color: lightblue;
            margin: 0 auto;
        }
        #head .headMain > .logo{float: left;margin-top: 30px;}
        #head .headMain > .nav{float: right; margin-top: 50px;}
        #head .headMain > .nav >.list >li{float:left;margin-left: 40px;position: relative;}
        #head .headMain > .nav >.list >li .up{color: black;position: absolute;width: 0;overflow: hidden;transition: all 1s;}
        #head .headMain > .nav >.list >li:hover .up{width: 100%;}
        #head .headMain > .arrow{width: 21px;height: 11px;background: url(img/menuIndicator.png);
                                position: absolute;left: 50%;bottom: -11px;transition: all 1s;z-index: 1;}
        /* 内容区布局 */
        /* 文字参数布局 */
        .commonTitle{ color:#009ee0; font-size:80px; line-height:0.8; 
		            font-weight:bold; letter-spacing:-5px;
	                }
        .commonText{ color:white; line-height:1.5; font-size:15px;}
        #content {
            background: gray;
            position: relative;
            overflow: hidden;
            width: 100%;
        }
        #content >.list{
            background: gray;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            transition: all 1s;
        }
        #content >ul >li{
            position: relative;
            background-position: 50% 50% !important;
        }
        #content >ul >li > div{
            width: 1100px;
            height: 520px;
            /* background: blue; */
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
        #content >.list > .home{background: url(img/bg1.jpg) no-repeat;}
        #content >.list > .course{background: url(img/bg2.jpg) no-repeat;}
        #content >.list > .works{background: url(img/bg4.jpg) no-repeat;}
        #content >.list > .about{background: url(img/bg3.jpg) no-repeat;}
        #content >.list > .team{background: url(img/bg5.jpg) no-repeat;}
        #content >.list >.works .work1 {position:relative;z-index:2;margin:50px 0px 100px 50px;}
        #content >.list >.works .work2{
            position: relative;
            margin-left: 50px;
            z-index: 2;
        }
        #content >.list >.works >div>.work2 .item{
            position: relative;
            float:left;
            margin-left: 1px;
            width: 220px;
            height: 133px;
            overflow: hidden;
        }
        #content >.list >.works >div>.work2 .item:last-child{
            width: 332px;
        }
        #content >.list >.works >div>.work2 .mask{
            position: absolute;
            left: 0;top: 0;bottom: 0;right: 0;
            margin: auto;
            background: black;
            box-sizing: border-box;
            padding: 10px;
            opacity: 0;
            color: white;
        }
        #content >.list >.works >div>.work2  img{
            transition: all .3s;
        }
        #content >.list >.works >div>.work2 .mask>.icon{
            width: 32px;height: 34px;
            margin:0 auto;margin-top: 10px;
            background: url(img/zoomico.png) no-repeat;
            transition: all .5s;
        }
        #content >.list >.works >div>.work2 .mask:hover{
            opacity: 0.8;
        }
        #content >.list >.works >div>.work2 .mask>.icon:hover{
            background-position: 0 -34px;
        }
        #content >.list >.works >div>.work2 .item:hover img{
            transform: rotate(10deg) scale(1.3);
        }
        #content >.list >.works .work3{
            position: absolute;
            width: 167px;
            height: 191px;
            left: 900px;
            top: 170px;
            background: url(img/robot.png);
            animation: move 5s infinite;
            z-index: 2;
        }
        @keyframes move{
            0%{}
            50%{
                transform: translateX(-400px);
            }
            51%{
                transform: translateX(-400px) rotateY(180deg);
            }
            100%{
                transform: translateX(0px)rotateY(180deg);
            }
        }
        /* 第二屏css */
        #content >.list>.course .course1{
            margin: 50px;
            z-index: 2;
        }
        #content >.list>.course .text{
            position: absolute;
            width: 400px;
            height: 400px;
            left: 50px;
            z-index: 2;
        }
        #content >.list>.course .photos{
            position: absolute;
            right: 50px;
            top: 70px;
            width: 480px;
            z-index: 2;
        }
        #content >.list>.course .photos>.item{
            backface-visibility: hidden;
            position: relative;
            float: left;
            width: 120px;
            height: 132px;
            transition: all 2s;
            perspective: 500px;
            transform-style: preserve-3d;
        }
        #content >.list>.course .photos>.item .face{
            /* z-index: 1; */
            transition: all 1s;
            position: absolute;
            left: 0;top: 0;right: 0;bottom: 0;
            margin: auto;
            background-position: 50% 50%;
        }
        #content >.list>li{
            overflow: hidden;
        }
        #content > .list > .course .photos .item .face{background-position: 50% 50%!important;}
		#content > .list > .course .photos .item:nth-of-type(1) .face{background: url(img/apcoa.png) no-repeat;}
		#content > .list > .course .photos .item:nth-of-type(2) .face{background: url(img/apcoa.png) no-repeat;}
		#content > .list > .course .photos .item:nth-of-type(3) .face{background: url(img/bks.png) no-repeat;}
		#content > .list > .course .photos .item:nth-of-type(4) .face{background: url(img/gu.png) no-repeat;}
		#content > .list > .course .photos .item:nth-of-type(5) .face{background: url(img/hlx.png) no-repeat;}
		#content > .list > .course .photos .item:nth-of-type(6) .face{background: url(img/lbs.png) no-repeat;}
		#content > .list > .course .photos .item:nth-of-type(7) .face{background: url(img/leonberg.png) no-repeat;}
		#content > .list > .course .photos .item:nth-of-type(8) .face{background: url(img/pcwelt.png) no-repeat;}
		#content > .list > .course .photos .item:nth-of-type(9) .face{background: url(img/tata.png) no-repeat;}
		#content > .list > .course .photos .item:nth-of-type(10) .face{background: url(img/bks.png) no-repeat;}
		#content > .list > .course .photos .item:nth-of-type(11) .face{background: url(img/bks.png) no-repeat;}
		#content > .list > .course .photos .item:nth-of-type(12) .face{background: url(img/bks.png) no-repeat;}
				
        #content >.list>.course .photos>.item .backface{
            width: 100%;
            height: 100%;
            background: pink;
            opacity: 1;
            transform: rotateY(180deg);
            transition: all 1s;
            backface-visibility: hidden;
            box-sizing: border-box;padding: 10px;
        }
        #content >.list>.course .photos>.line{
            position: absolute;
            top: -7px;
            width: 9px;
            height: 410px;
            background: url(img/plus_row.png);
        }
        #content >.list>.course .photos>.line:nth-of-type(1){
            left: -5px;
        }
        #content >.list>.course .photos>.line:nth-of-type(2){
            left: 115px;
        }
        #content >.list>.course .photos>.line:nth-of-type(3){
            left: 235px;
        }
        #content >.list>.course .photos>.line:nth-of-type(4){
            left: 355px;
        }
        #content >.list>.course .photos>.line:nth-of-type(5){
            left: 475px;
        }
        #content >.list>.course .photos>.item:hover .face{
            transform: rotateY(180deg);
        }
        #content >.list>.course .photos>.item:hover .backface{
            transform: rotateY(360deg);
        }

        /* 第一屏css */
        #content >.list >.home .home1>li>div{color: white;}
        #content >.list >.home .home1{
            width: 100%;
            height: 100%;
            perspective: 1000px;transform-style: preserve-3d;
        }
        #content >.list >.home .home1>li{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            float: left;
            /* 先把四个页面都设置为不可见，在动画结束之后把第一页设置成可见。 */
            visibility: hidden;
        }
        #content >.list >.home .home1>li:nth-child(1){
            background: #dc6c5f;
        }
        #content >.list >.home .home1>li:nth-child(2){
            background: #95dc84;
        }
        #content >.list >.home .home1>li:nth-child(3){
            background: #64b9d2;
        }
        #content >.list >.home .home1>li:nth-child(4){
            background: #000000;
        }
        /* 文字居中 */
        #content >.list >.home .home1>li div{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        
        /* 小圆点css */
        #content >.list >.home .home2{
            position: absolute;left: 0;right: 0;bottom: 0;text-align: center;
            
        }
        #content >.list >.home .home2>li{
            border-radius: 50%;
            width: 20px;height: 20px;
            background: rgba(255,255,255,0.5);
            display: inline-block;
            box-shadow: 0 0 4px rgba(25,25,25,0.8);
            cursor: pointer;
        }
        #content >.list >.home .home2>li.active{background: white;cursor: default;}
        #content >.list >.home .home1>li.active{visibility: visible;}
        #content >.list >.home .home1>li.leftHide{visibility:hidden ; animation: leftHide 1s linear;}
        #content >.list >.home .home1>li.rightShow{visibility:visible ;animation: rightShow 1s linear;}

        @keyframes leftHide{
            0%{visibility: visible;}
            50%{transform: translateX(-40%) rotateY(30deg) scale(.8);}
            100%{transform: translateZ(-200px);}
        }
        @keyframes rightShow{
            0%{visibility: hidden;transform: translateZ(-200px);}
            50%{transform: translateX(40%) rotateY(-30deg) scale(.8);}
            100%{}
        }

        /* 上面是从左边隐藏，从右边出现的动画，接下来是从左边出现，从右边隐藏 */
        #content >.list >.home .home1>li.leftShow{visibility:visible ; animation: leftShow 1s linear;}
        #content >.list >.home .home1>li.rightHide{visibility:hidden ;animation: rightHide 1s linear;}

        @keyframes leftShow{
            0%{visibility:hidden ;transform: translateZ(-200px);}
            50%{transform: translateX(-40%) rotateY(-30deg) scale(.8);}
            100%{}
        }
        @keyframes rightHide{
            0%{visibility:visible ;}
            50%{transform: translateX(40%) rotateY(30deg) scale(.8);}
            100%{transform: translateZ(-200px);}
        }

    /* 第四屏css */
    #content > .list > .about .title{
        width: 400px;
        margin-top: 50px;
        margin-right: 0px;
        margin-bottom: 100px;
        margin-left: 50px;
    }
    #content > .list > .about .description{
        position: absolute;
        width: 400px;
        margin-left: 50px;
    }
    #content > .list > .about .line{
        overflow: hidden;
        width: 357px;
        height: 998px;
        position: absolute;
        background:url(img/greenLine.png)no-repeat;
        left: 50%;
        top: -150px;
    }
    #content > .list > .about .photo>.item1{
        width: 260px;
        height: 200px;
        position: absolute;
        left: 750px;
        top: 50px;
        border: 5px solid rgba(255,255,255,0.5);
        border-radius: 8px;
        z-index: 1;
        overflow: hidden;
        transition: 1s transform;
    }
    #content > .list > .about .photo>.item2{
        width: 260px;
        height: 200px;
        position: absolute;
        left: 600px;
        top: 290px;
        border: 5px solid rgba(255,255,255,0.5);
        border-radius: 8px;
        z-index: 1;
        overflow: hidden;
        transition: 1s transform;
    }
    #content > .list > .about .photo>.item1>span,#content > .list > .about .photo>.item1>ul,
    #content > .list > .about .photo>.item2>span,#content > .list > .about .photo>.item2>ul{
        position: absolute;
        left: 0;bottom: 0;top: 0;right: 0;
    }
    #content > .list > .about .photo>.item1>ul>li,
    #content > .list > .about .photo>.item2>ul>li{
        float: left;
        position: relative;
        overflow: hidden;
        
    }
    #content > .list > .about .photo>.item1>ul>li>img,
    #content > .list > .about .photo>.item2>ul>li>img{
        position: absolute;
        transition:  all 1s;
    }
    #content > .list > .about .photo>.item1>span{
        background: url(img/about2.jpg)no-repeat;
        transform: scale(1.5);
        transition: all 1s;
    }
    #content > .list > .about .photo>.item2>span{
        background: url(img/about4.jpg)no-repeat;
        transform: scale(1.5);
        transition: all 1s;
    }
    #content > .list > .about .photo>.item1:hover span{
        transform: scale(1);
    }
    #content > .list > .about .photo>.item2:hover span{
        transform: scale(1);
    }

    /* 第五屏css */
    #content>.list>.team .team1{
        margin:50px;
        width: 400px;
        float: left;
        transition: all 1s;
    }
    #content>.list>.team .text{
        margin:50px;
        width: 400px;
        float: right;
        transition: all 1s;
    }
    #content>.list>.team .team2{
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top:250px;
    }
    #content>.list>.team .team2>li{
        float: left;
        width: 118px;
        height: 100%;
        background: url(img/team.png) no-repeat;
        transition: all .5s;
    }
    #content>.list>.team section{
        position: relative;
        width: 100%;
        height: 100%;
    }
    #content>.circle{
        position: fixed;
        right: 10px;
        top: 50%;
        z-index: 4;
    }
    #content>.circle li{
        width: 20px;
        height: 20px;
        border: 5px solid yellow;
        margin-top: 10px;
        right: 10px;
        border-radius: 50%; 
    }
    #content>.circle .active{
        background: white;
    }
    #content>.list>.team canvas{
        position: absolute;
        top:250px;
    }
    /* 出入场 */
    #content > .list >.home .home1,#content > .list >.home .home2{
        transition: 1s transform,1s opacity;
    }
    #content>.list>.course .plane1{ width:359px; height:283px; background:url(img/plane1.png) no-repeat; position:absolute; left:300px; top:-100px; transition:1s;}
	#content>.list>.course .plane2{ width:309px; height:249px; background:url(img/plane2.png) no-repeat; position:absolute; left:-100px; top:200px; transition:1s;}
	#content>.list>.course .plane3{ width:230px; height:182px; background:url(img/plane3.png) no-repeat; position:absolute; left:300px; top:400px; transition:1s;}
    
    #content>.list>.works .pencel1{ width:180px; height:97px; background:url(img/pencel1.png) no-repeat; position:absolute; transition:1s; left:500px; top:0;}
	#content>.list>.works .pencel2{ width:268px; height:38px; background:url(img/pencel2.png) no-repeat; position:absolute; transition:1s; left:300px; top:250px;}
	#content>.list>.works .pencel3{ width:441px; height:231px; background:url(img/pencel3.png) no-repeat; position:absolute; transition:1s; left:650px; top:300px;}
    #wrap>#head>.headMain .music{float: left;  width:14px; height:14px; margin:50px 0 0 5px;background: url("img/musicon.gif");}
    #wrap{height: 100%;}
    #mask{width: 100%; height: 100%;position: absolute;z-index: 100;}
    #mask .up{width: 100%;height: 50%;background: lightblue;transition: 1s height;}
    #mask .down{width: 100%;height: 50%;background: lightblue;
        transition: 1s height;position: absolute;bottom: 0;}
    #mask .line{width: 0;height: 4px;background: white;position: absolute;
                z-index: 101;left: 0;top: 50%;transition: 1s width;}
    </style>
</head>
<body>
    <!-- 流体布局 -->

    <section id="wrap">
        <div id="mask">
            <div class="up"></div>
            <div class="down"></div>
            <span class="line"></span>
        </div>
        <!-- 固定布局 -->
        <header id="head">
            <div class="headMain">
                <h1 class="logo">
                    <a href="javascript:;">
                        <img src="img/logo.png" alt="">
                    </a>
                </h1>
                <nav class="nav">
                    <ul class="list clearfix">
                        <li>
                            <a href="javascript:;">
                                <div class="up"><img src="img/home_gruen.png"></div>
                                <div class="down"><img src="img/home.png"></div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="up">Course</div>
                                <div class="down">Course</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="up">Works</div>
                                <div class="down">Works</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="up">About</div>
                                <div class="down">About</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="up">Team</div>
                                <div class="down">Team</div>
                            </a>
                        </li>
                    </ul>
                </nav>
                <div class="arrow"></div>
                <div class="music">
                    <audio src="img/audio.mp3" loop></audio>
                </div>
            </div>
        </header>
     
    
    <section id="content">
        <ul class="list">
            <li class="home">
                <div class="">
                    <ul class="home1">
                        <li class="commonTitle active leftShow">
                            <div>one layer</div>
                        </li>
                        <li class="commonTitle rightHide">
                            <div>two layer</div>
                        </li>
                        <li class="commonTitle">
                            <div>three layer</div>
                        </li>
                        <li class="commonTitle">
                            <div>four layer</div>
                        </li>
                    </ul>
                    <ul class="home2">
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </li>
            <li class="course">
                <div class="">
                    <div class="course1 commonTitle">
                        <span>EINIGE</span><br>
                        <span>UNISERER</span><br>
                        <span>KUNDEN</span><br>
                    </div>
                    <div class="text commonText">Das Kundenvertrauen in unsere Kompetenz ist die notwendige Basis einer erfolgreichen Zusammenarbeit, gleichzeitig aber auch das größte Lob, das man uns entgegenbringen kann.
                        Diese und viele weitere große und kleine Kunden vertrauen uns seit Jahren, was uns stolz macht, und dafür sagen wir an dieser Stelle einfach mal.</div>
                    <div class="photos">
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <div class="item">
                            <div class="face">
                            </div>
                            <div class="backface">lwx是🐷</div>
                        </div>
                        <div class="item">
                            <div class="face">
                            </div>
                            <div class="backface"></div>
                        </div>
                        <div class="item">
                            <div class="face">
                            </div>
                            <div class="backface"></div>
                        </div>
                        <div class="item">
                            <div class="face">
                            </div>
                            <div class="backface"></div>
                        </div>
                        <div class="item">
                            <div class="face">
                            </div>
                            <div class="backface"></div>
                        </div>
                        <div class="item">
                            <div class="face">
                            </div>
                            <div class="backface"></div>
                        </div>
                        <div class="item">
                            <div class="face">
                            </div>
                            <div class="backface"></div>
                        </div>
                        <div class="item">
                            <div class="face">
                            </div>
                            <div class="backface"></div>
                        </div>
                        <div class="item">
                            <div class="face">
                            </div>
                            <div class="backface"></div>
                        </div>
                        <div class="item">
                            <div class="face">
                            </div>
                            <div class="backface"></div>
                        </div>
                        <div class="item">
                            <div class="face">
                            </div>
                            <div class="backface"></div>
                        </div>
                        <div class="item">
                            <div class="face">
                            </div>
                            <div class="backface"></div>
                        </div>
                    </div>
                    <div class="plane1"></div>
                    <div class="plane2"></div>
                    <div class="plane3"></div>
                </div>
            </li>
            <li class="works">
                <div class="se">
                    <header class="work1 commonTitle">
                        <span>EINBLICK</span><br>
                        <span>ERKENNTNIS</span><br>
                        <span>ERGEBNIS</span><br>
                    </header>
                    <div class="work2">
                        <div class="item">
                            <img src="img/worksimg1.jpg" alt="">
                            <div class="mask">
                                <span>天干物燥，小心火烛。</span>
                                <div class="icon"></div>
                            </div>
                        </div>
                        <div class="item">
                            <img src="img/worksimg2.jpg" alt="">
                            <div class="mask">
                                <span>天干物燥，小心火烛。</span>
                                <div class="icon"></div>
                            </div>
                        </div>
                        <div class="item">
                            <img src="img/worksimg3.jpg" alt="">
                            <div class="mask">
                                <span>天干物燥，小心火烛。</span>
                                <div class="icon"></div>
                            </div>
                        </div>
                        <div class="item">
                            <img src="img/worksimg4.jpg" alt="">
                            <div class="mask">
                                <span>天干物燥，小心火烛。</span>
                                <div class="icon"></div>
                            </div>
                        </div>
                    </div>
                    <div class="work3"></div>
                    <div class="pencel1"></div>
                    <div class="pencel2"></div>
                    <div class="pencel3"></div>
                </div>
            </li>
            <li class="about">
                <div class="">
                    <div class="title commonTitle">
                        <span>DIE</span><br>
                        <span>SPEZIELLE</span><br>
                        <span>VIELFALT</span><br>
                    </div>
                    <div class="description commonText">
                        Der bunte Medienmix ist die Faszination die uns antreibt und das, was man an uns schätzt. Von A bis Z und von vorne bis hinten nehmen wir Ihr Projekt unter unsere Fittiche und lassen es zu etwas Großartigem heranwachsen.
                    </div>
                    <div class="photo">
                        <div class="item1">
                            <span></span>
                            <ul data-src="img/about1.jpg"></ul>
                        </div>
                        <div class="item2">
                            <span></span>
                            <ul data-src="img/about3.jpg"></ul>
                        </div>
                    </div>
                    <div class="line"></div>
                </div>
            </li>
            <li class="team">
                <section class="">
                    <header class="team1 commonTitle">
                        <span>WIR SIND</span><br>
                        <span>VOXELAIR</span><br>
                    </header>
                    <div class="text commonText">
                        <span>Wir sind seit 2002 eine Full-Service-Werbeagentur mit Stammsitz in Heimsheim, zwischen Stuttgart und Karlsruhe.</span><br>
                        <span>Über 60 Jahre Erfahrung vereinen das gesamte VoxelAir-Team. Dabei hat jedes Voxel neben professionellem Allroundwissen auch sein ganz spezielles Gebiet, um selbst die individuellsten Kundenwünsche schnell und kompetent umzusetzen.</span>
                    </div>
                    <ul class="team2">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </section>
            </li>
        </ul>
    <ul class="circle">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    </section>
</section>   
</body>
<script>
    window.onload = function(){
        /* 因为小尖头是对于headmain进行定位的，而list也是，所以可以用list的定位去匹配 */
        /* 小尖头的定位就等于 list的left+list图片的一半-自己本身的一半。 */
        var arrowel = document.querySelector("#head .headMain > .arrow");
        var listNodes = document.querySelectorAll("#head .headMain > .nav >.list >li");
        var firstNode = listNodes[0];
        var UpNodes = document.querySelectorAll("#head .headMain > .nav >.list >li .up");
        var clist = document.querySelector("#content .list");
        var bCicleli= document.querySelectorAll("#content>.circle li");
        /* 找到home2里面的小圆点元素 */
        /* 当前页面的索引 */
        var now=0;
        var preindex=0;
        /* 出入场 */
        var anArr = [
            {
                inAn:function(){
                    var home1 = document.querySelector("#content>.list>.home .home1");
                    var home2 = document.querySelector("#content>.list>.home .home2");
                    home1.style.transform="translateY(0)";
                    home2.style.transform="translateY(0)";
                    home1.style.opacity=1;
                    home2.style.opacity=1;
                },
                outAn:function(){
                    var home1 = document.querySelector("#content>.list>.home .home1");
                    var home2 = document.querySelector("#content>.list>.home .home2");
                    home1.style.transform="translateY(-400px)";
                    home2.style.transform="translateY(100px)";
                    home1.style.opacity=0;
                    home2.style.opacity=0;
                }
            },
            {
                inAn:function(){
                    var course1 = document.querySelector("#content>.list>.course .plane1");
                    var course2 = document.querySelector("#content>.list>.course .plane2");
                    var course3 = document.querySelector("#content>.list>.course .plane3");
                    course1.style.transform="translate(0px,0px)";
                    course2.style.transform="translate(0px,0px)";
                    course3.style.transform="translate(0px,0px)";
                },
                outAn:function(){
                    var course1 = document.querySelector("#content>.list>.course .plane1");
                    var course2 = document.querySelector("#content>.list>.course .plane2");
                    var course3 = document.querySelector("#content>.list>.course .plane3");
                    course1.style.transform="translate(-200px,-200px)";
                    course2.style.transform="translate(-200px,200px)";
                    course3.style.transform="translate(200px,-200px)";
                }
            },
            {
                inAn:function(){
                    var pen1 = document.querySelector("#content>.list>.works .pencel1");
                    var pen2 = document.querySelector("#content>.list>.works .pencel2");
                    var pen3 = document.querySelector("#content>.list>.works .pencel3");
                    pen1.style.transform="translate(0px)";
                    pen2.style.transform="translate(0px)";
                    pen3.style.transform="translate(0px)";
                },
                outAn:function(){
                    var pen1 = document.querySelector("#content>.list>.works .pencel1");
                    var pen2 = document.querySelector("#content>.list>.works .pencel2");
                    var pen3 = document.querySelector("#content>.list>.works .pencel3");
                    pen1.style.transform="translate(0px,-200px)";
                    pen2.style.transform="translate(0px,200px)";
                    pen3.style.transform="translate(0px,200px)";
                }
            },
            {
                inAn:function(){
                    var photo1 = document.querySelector("#content >.list>.about .photo>.item1");
                    var photo2 = document.querySelector("#content >.list>.about .photo>.item2");
                    photo1.style.transform="rotate(0deg)";
                    photo2.style.transform="rotate(0deg)";
                },
                outAn:function(){
                    var photo1 = document.querySelector("#content >.list>.about .photo>.item1");
                    var photo2 = document.querySelector("#content >.list>.about .photo>.item2");
                    photo1.style.transform="rotate(30deg)";
                    photo2.style.transform="rotate(-30deg)";
                }
            },
            {
                inAn:function(){
                    var d1 = document.querySelector("#content>.list>.team .team1");
                    var d2 = document.querySelector("#content>.list>.team .text");
                    d1.style.transform="translateX(0px)";
                    d2.style.transform="translateX(0px)";
                },
                outAn:function(){
                    var d1 = document.querySelector("#content>.list>.team .team1");
                    var d2 = document.querySelector("#content>.list>.team .text");
                    d1.style.transform="translateX(-400px)";
                    d2.style.transform="translateX(400px)";
                }
            },
        ];
        /* 先把所有都置成出场状态 */
        for(var i=0;i<anArr.length;i++){
            anArr[i]["outAn"]();
        }
        /* 进场就开始第一屏入场 */
        setTimeout(function(){
            anArr[0].inAn();
        },2000);

  /*       anArr[1].outAn();
        setTimeout(function(){
            anArr[1].inAn();
        },2000); */
        /* anArr[2].outAn();
        setTimeout(function(){
            anArr[2].inAn();
        },2000);
        anArr[3].outAn();
        setTimeout(function(){
            anArr[3].inAn();
        },4000);
        anArr[4].outAn();
        setTimeout(function(){
            anArr[4].inAn();
        },4000); */
        UpNodes[0].style.width = "100%";
        console.log(firstNode.offsetLeft);
        /* 给left赋值的时候要+px */
        arrowel.style.left = firstNode.offsetLeft+firstNode.offsetWidth/2-arrowel.offsetWidth/2+"px";
        for(var i=0;i<listNodes.length;i++)
        {
            /* 索引转绑很重要 */
            listNodes[i].index = i;
            //绑定事件属于异步
            listNodes[i].onclick=function(){
                preindex=now;
                move(this.index);
                now = this.index;
            for(var i=0;i<bCicleli.length;i++){
                bCicleli[i].classList.remove("active");
            }
            bCicleli[this.index].classList.add("active");
            }
        }
        /* 页面切换 */
        function move(index){
            for(var j=0;j<UpNodes.length;j++)
            {
                /* 这里不能置为0，要置为空，如果为0，上面的hover效果就没了。 */
                UpNodes[j].style.width="";
            }
            /* console.log(UpNodes); */
            /* console.log(index); */
            UpNodes[index].style.width="100%"
            arrowel.style.left = listNodes[index].offsetLeft+listNodes[index].offsetWidth/2-arrowel.offsetWidth/2+"px";
            clist.style.top = -index*(document.documentElement.clientHeight-head.offsetHeight)+"px";
            /* 出入场逻辑 */
            console.log(index);
            if(anArr[index]&&typeof anArr[index]["inAn"]=="function"){
                anArr[index]["inAn"]();
            }
            console.log(preindex);
            if(anArr[preindex]&&typeof anArr[preindex]["outAn"]=="function"){
                anArr[preindex]["outAn"]();
            }
        }
        /* 内容区js */
        /* 取头部文件的元素 */
        var head = document.querySelector("#head");
        /* 取内容区文件的元素 */
        var content = document.querySelector("#content");
        var liNodes = document.querySelectorAll("#content .list>li");
        var home2liNodes = document.querySelectorAll("#content >.list >.home .home2>li");
        var home1liNodes = document.querySelectorAll("#content >.list >.home .home1>li");
        var home1 = document.querySelector("#content >.list >.home .home1");
        /* console.log(home2liNodes); */
        /* console.log(document.documentElement.clientHeight); */
        var timer = 0;
        contentBind();
        if(content.addEventListener){
            content.addEventListener("DOMMouseScroll",function(ev){
                ev = ev||event;
                /* 让fn的逻辑在滚动行为频繁触发的时候只执行一次 */
                clearTimeout(timer);
                timer = setTimeout(function(){
                    fn(ev);
                },50)
            });
        }
        content.onmousewheel=function(ev){
            ev = ev||event;
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn(ev);
            },50)
        };
        function fn(ev){
            /* 事件提取 */
            ev=ev||event;
            /* 方向提取 */
            var dir="";
            if(ev.wheelDelta){
                dir=ev.wheelDelta>0?"up":"down";
            }
            if(ev.detail){
                dir=ev.detail>0?"up":"down";
            }
            switch(dir){
                case "up":
                    if(now<4){
                        preindex=now;
                        now+=1;
                        /* console.log(now); */
                        move(now);
                    }
                    break;
                case "down":
                    if(now>0){
                        preindex=now;
                        now-=1;
                        move(now);
                        /* console.log(now); */
                    }

            }
            for(var i=0;i<bCicleli.length;i++){
                bCicleli[i].classList.remove("active");
            }
            bCicleli[now].classList.add("active");
            
        }
        window.onresize=function(){
            /* 
                调整分辨率
                1.没有点击的时候视口只能出现一屏
                2.点击后视口只出现一屏的偏移量调整
                3.小尖头也需要调整，只要用到视口位置大小的都要调整。
            */
            contentBind();
            clist.style.top = -now*(document.documentElement.clientHeight-head.offsetHeight)+"px";
            arrowel.style.left = listNodes[now].offsetLeft+listNodes[now].offsetWidth/2-arrowel.offsetWidth/2+"px";
        }
        /* 页面切换 */
        function contentBind(){
            /* offsetHeight包括了边框，clientHeight不包括边框，两者都包括内边距 */
            content.style.height = document.documentElement.clientHeight-head.offsetHeight+"px";
            for(var i=0;i<liNodes.length;i++){
                liNodes[i].style.height = content.offsetHeight+"px";
            }
        }

        //第一屏内容区交互3d效果
        var timer3d=0;
        var oldindex=0;
        var autoindex=0;
        /* home3d(); */
        function home3d(){
            for(var i=0;i<home2liNodes.length;i++){
                
                home2liNodes[i].index=i;
                home2liNodes[i].onclick=function(){
                    clearInterval(timer3d);
                    for(var i=0;i<home2liNodes.length;i++){
                        home2liNodes[i].classList.remove("active");
                    }
                    this.classList.add("active");
                    //从左往右点，当前索引大于上一次
                    if(this.index>oldindex){
                        home1liNodes[this.index].classList.remove("leftShow");
                        home1liNodes[this.index].classList.remove("rightHide");
                        home1liNodes[this.index].classList.remove("leftHide");
                        home1liNodes[this.index].classList.add("rightShow");

                        home1liNodes[oldindex].classList.remove("leftShow");
                        home1liNodes[oldindex].classList.remove("rightHide");
                        home1liNodes[oldindex].classList.remove("rightShow");
                        home1liNodes[oldindex].classList.add("leftHide");
                    }

                    //从右向左点
                    if(this.index<oldindex){
                        home1liNodes[this.index].classList.remove("rightShow");
                        home1liNodes[this.index].classList.remove("rightHide");
                        home1liNodes[this.index].classList.remove("leftHide");
                        home1liNodes[this.index].classList.add("leftShow");

                        home1liNodes[oldindex].classList.remove("leftShow");
                        home1liNodes[oldindex].classList.remove("leftHide");
                        home1liNodes[oldindex].classList.remove("rightShow");
                        home1liNodes[oldindex].classList.add("rightHide");
                    }
                    oldindex=this.index;
                    autoindex = oldindex;
                    carousel();                } 
            }
            
        }

        /* 无缝轮播 */
        carousel();
        function carousel(){
            timer3d = setInterval(function(){
                
                autoindex++;
                if(autoindex == home1liNodes.length){
                    autoindex=0;
                }
                for(var i=0;i<home2liNodes.length;i++){
                        home2liNodes[i].classList.remove("active");
                    }
                home2liNodes[autoindex].classList.add("active");
                home1liNodes[autoindex].classList.remove("leftShow");
                home1liNodes[autoindex].classList.remove("rightHide");
                home1liNodes[autoindex].classList.remove("leftHide");
                home1liNodes[autoindex].classList.add("rightShow");
                home1liNodes[oldindex].classList.remove("leftShow");
                home1liNodes[oldindex].classList.remove("rightHide");
                home1liNodes[oldindex].classList.remove("rightShow");
                home1liNodes[oldindex].classList.add("leftHide");
                oldindex = autoindex;
            },3000)
            
        }
        home1.onmouseenter=function(){
            clearInterval(timer3d);
        }
        home1.onmouseleave=function(){
            carousel();
        }

    /* 第四屏幕图片杂裂效果 */
    /* 拿到item里面的ul */
    var aboutUl1= document.querySelector("#content > .list > .about .photo>.item1>ul");
    var aboutUl2= document.querySelector("#content > .list > .about .photo>.item2>ul");
    picBoom();
    function picBoom(){
        change(aboutUl1);
        change(aboutUl2);
    }
    var w=aboutUl1.offsetWidth/2;
    var h =aboutUl2.offsetHeight/2;
    function change(Ul){
        var src=Ul.dataset.src;
        var w=Ul.offsetWidth/2;
        var h =Ul.offsetHeight/2;
        for(var i=0;i<4;i++){
            var liNode = document.createElement("li");
            var img = document.createElement("img");
            img.src=src;
            liNode.style.width = w+"px";
            liNode.style.height = h+"px";
            /*1.left:0,top0
            2.left:-w,top:0
            3.left:0,top:-h
            4.left:-w,top:-h*/
            if(i%2==0){
                img.style.left=0+"px";
            }
            else{
                img.style.left=-w+"px";
            }
            if(i<=1){
                img.style.top=0+"px";
            }
            else{
                img.style.top=-h+"px";
            }
            liNode.appendChild(img);
            Ul.appendChild(liNode);
            
        }
        
    }
    var img=document.querySelectorAll("#content > .list > .about .photo>.item1>ul>li>img");
    var img2=document.querySelectorAll("#content > .list > .about .photo>.item2>ul>li>img");
    aboutUl1.onmouseenter=function(){
            /*1.left:0,top0
            2.left:-w,top:0
            3.left:0,top:-h
            4.left:-w,top:-h*/
        /*1.left:0,top:h
        2.left:-2w,top:0
        3.left:w,top:-h
        4.left:-w,top:-2h*/
            img[0].style.top=h+"px";
            img[1].style.left=-2*w+"px";
            img[2].style.left=w+"px";
            img[3].style.top=-2*h+"px";
    };
    aboutUl2.onmouseenter=function(){
        /*1.left:0,top:h
        2.left:-2w,top:0
        3.left:w,top:-h
        4.left:-w,top:-2h*/
            img2[0].style.top=h+"px";
            img2[1].style.left=-2*w+"px";
            img2[2].style.left=w+"px";
            img2[3].style.top=-2*h+"px";
    };
    aboutUl1.onmouseleave=function(){
            /*1.left:0,top0
            2.left:-w,top:0
            3.left:0,top:-h
            4.left:-w,top:-h*/
        /*1.left:0,top:h
        2.left:-2w,top:0
        3.left:w,top:-h
        4.left:-w,top:-2h*/
            img[0].style.top=0+"px";
            img[1].style.left=-w+"px";
            img[2].style.left=0+"px";
            img[3].style.top=-h+"px";
    };
    aboutUl2.onmouseleave=function(){
        /*1.left:0,top:h
        2.left:-2w,top:0
        3.left:w,top:-h
        4.left:-w,top:-2h*/
            img2[0].style.top=0+"px";
            img2[1].style.left=-w+"px";
            img2[2].style.left=0+"px";
            img2[3].style.top=-h+"px";
    };
    /* 获取照片墙li元素 */
    var t2liNodes = document.querySelectorAll("#content>.list>.team .team2>li");
    for(var i=0;i<t2liNodes.length;i++){
        t2liNodes[i].style.backgroundPosition=-i*118+"px";
    }
    console.log(bCicleli);
    for(var i=0;i<bCicleli.length;i++){
        bCicleli[i].index=i
        bCicleli[i].onclick=function(){
            move(this.index)
            preindex=now;
            now = this.index;
            for(var i=0;i<bCicleli.length;i++){
                bCicleli[i].classList.remove("active");
            }
            bCicleli[this.index].classList.add("active");
        }
    }
    

    /* 第五屏气泡效果 */
    /* 先拿到所要操作的li */
    var tmember = document.querySelectorAll("#content >.list>.team .team2>li");
    var tS = document.querySelector("#content>.list>.team section");
    var t2 = document.querySelector("#content >.list>.team .team2");
    console.log(tS);
    console.log(tmember);
    biubiu();
    /* 第五屏气泡动画 */
    function biubiu(){
        var time1=0;
        var time2=0;
        for(var i=0;i<tmember.length;i++){
            var oc = null;
            tmember[i].index=i;
            tmember[i].onmouseenter=function(){
                for(var i=0;i<tmember.length;i++){
                    if(i!=this.index){
                        tmember[i].style.opacity=0.4;
                    }
                    addCanvas();
                    qipao(oc);
                    console.log(this.offsetLeft);
                    console.log(t2.offsetLeft);
                    oc.style.left = this.offsetLeft+t2.offsetLeft+"px";
                }
            }
            
            function addCanvas(){
                if(oc==null){
                    oc = document.createElement("canvas");
                    oc.width=tmember[0].offsetWidth;
                    oc.height = tmember[0].offsetHeight*2/3;
                    tS.appendChild(oc);
                    oc.onmouseleave=function(){
                        for(var i=0;i<tmember.length;i++){
                            if(i!=this.index){
                                tmember[i].style.opacity=1;
                            }
                        }
                        removeCanvas();
                    }
                }
            }
            
            function qipao(canvasNode){
                    /* 先拿到画板这个元素 */
                /* 获取上下文并检查浏览器是否支持canvas元素代码 */
                if(canvasNode.getContext){
                    var ctx = canvasNode.getContext("2d");
                    var arr=[];
                    time1=setInterval(function(){
                        /* console.log(arr); */
                        ctx.clearRect(0,0,canvasNode.width,canvasNode.height);
                        arr.forEach(function(item,index){
                            item.deg+=15;
                            /* console.log(item.startX,item.startY,item.deg) */
                            item.x = item.startX+Math.sin(item.deg*Math.PI/180)*item.step;
                            item.y = item.startY-(item.deg*Math.PI/180)*item.step;
                            /* console.log(item.x,item.y,item.deg); */
                            if (item.y<-item.r)
                            {
                                arr.splice(index,1);
                                /* console.log(arr.length); */
                            }
                            /* console.log(arr.length) */
                        }) 
                        arr.forEach(function(item){
                            ctx.save();
                            ctx.fillStyle="rgba("+item.red+","+item.green+","+item.blue+","+item.alp+")";
                            ctx.beginPath();
                            /* console.log(item.x,item.y,item.r) */
                            ctx.arc(item.x,item.y,item.r,0,2*Math.PI);
                            ctx.fill();
                            ctx.restore();
                        })
                    },1000/60)
                }
                
                /* 设置计时器 */
                time2=setInterval(function(){
                    /* math.round就是四舍五入取整操作，这里就是xy坐标 */
                    var r = Math.random()*3+4;
                    /* console.log(canvasNode.width) */
                    var x = Math.random()*canvasNode.width;
                    var y = canvasNode.height-r;
                    
                    var red = Math.round(Math.random()*255);
                    var green = Math.round(Math.random()*255);
                    var blue = Math.round(Math.random()*255);
                    var alp =1;
                    var deg=0;
                    var startX = x;
                    var startY = y;
                    var step = Math.random()*30+20;
                    arr.push({     x:x,
                            y:y,
                            r:r,
                            step:step,
                            deg:deg,
                            red:red,
                            green:green,
                            blue:blue,
                            alp:alp,
                            startX:startX,
                            startY:startY
                    });
                },50)
            }
        }
        function removeCanvas(){
                oc.remove();
                oc=null;
                clearInterval(time1);
                clearInterval(time2);
                console.log(time1);
            }
    }
    var music=document.querySelector("#wrap>#head>.headMain .music");
    var audio=document.querySelector("#wrap>#head>.headMain .music audio");
    music.onclick=function(){
        if(audio.paused){
            audio.play();
            music.style.background="url(img/musicon.gif)";
        }
        else{
            audio.pause();
            music.style.background="url(img/musicoff.gif)";
        }
    }

    /* 开机动画 */
    var line=document.querySelector("#mask .line");
    var planes = document.querySelectorAll("#mask div");
    var mask = document.querySelector("#mask");
    loadingAn();
    
    function loadingAn(){
        var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','about1.jpg','about2.jpg','about3.jpg','about4.jpg','worksimg1.jpg','worksimg2.jpg','worksimg3.jpg','worksimg4.jpg','team.png','greenLine.png'];
        var flag=0;
        for(var i=0;i<arr.length;i++){
            var img = new Image();
            img.src="img/"+arr[i];
            img.onload=function(){
                flag++;
                line.style.width=flag/arr.length*100+"%";
                console.log(line.style.width);
            }
        }
        line.addEventListener("transitionend",function(){
			if(flag === arr.length){
				for(var i=0;i<planes.length;i++){
					planes[i].style.height=0+"px";
				}
				this.style.display="none";
				}
		})
        planes[0].addEventListener("transitionend",function(){
            mask.remove();
            audio.play();
            home3d();
        })
    }


    }

    






</script>
</html>